takkerのdark theme CSS

/takkerのDark Theme CSS

使っている端末の設定に合わせて、datk themeかlight themeかが切り替わります

prefers-color-schemeを使っている

cf. /hata6502/material-design

配色は✅/takkerのdark themeを調節するを参照

やりたいこと

QuickSearchで項目選択したときの色をdark themeにする

配色はCommand Pallet (GitHub)を参考にする

dropdown menu (Scrapbox) の色を変えるUserCSS

code:style.css

@import "../dropdown_menu_(Scrapbox)_の色を変えるUserCSS/style.css";

system設定がdark themeのときだけdark themeを適用する

code:style.css

@media (prefers-color-scheme: dark) {

配色をdefault-darkに変える

code:style.css

body {

--body-bg: #202228;

--navbar-bg: rgba(55, 59, 68, 0.3);

--navbar-icon-color: #fff;

--navbar-icon-active-color: #338c46;

--navbar-icon-hovered-color: #338c46;

--search-form-bg: rgba(255, 255, 255, 0.13);

--search-form-icon-color: #fff;

--search-form-icon-focus-color: #4a4a4a;

--card-title-color: #f0f0f0;

--card-title-bg: #2b2e38;

--card-bg: #373b44;

--card-hover-bg: rgba(0, 0, 0, 0.1);

--card-active-bg: rgba(229, 229, 229, 0.1);

--card-backside: #545860;

--card-description-color: #c4c4c4;

--card-description-link-color: #80c9fe;

--card-description-code-color: #ccc;

--card-box-shadow-color: #000;

--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);

--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);

--card-title-bg-pinned: #2b2e38;

--relation-label-bg: #2b2e38;

--relation-label-text: #dddede;

--relation-label-links-bg: #80c9fe;

--relation-label-links-text: #202228;

--relation-label-empty-bg: #fb7476;

--relation-label-empty-text: #fff;

--tool-color: #535863;

--tool-light-color: #353b48;

--tool-badge-bg: #2b2e38;

--tool-bg: #2b2e38;

--tool-text-color: #dddede;

--new-button-vertical-color: #fff;

--new-button-horizontal-color: #fff;

--new-button-bg: #46af5d;

--new-button-hover-bg: #338c46;

--new-button-active-bg: #346447;

--telomere-border: #545863;

--telomere-unread: #56a066;

--page-text-color: rgba(255, 255, 255, 0.87);

--page-link-color: #80c9fe;

--page-link-hover-color: #6a9ec6;

--page-link-color-cursor-line: #a985e4;

--page-bg: #373b44;

--empty-page-link-color: #fb7476;

--empty-page-link-hover-color: #b47576;

--line-title-color: rgba(255, 255, 255, 0.87);

--line-permalink-color: rgba(234, 218, 74, 0.35);

--code-color: #ccc;

--code-bg: rgba(0, 0, 0, 0.18);

--quote-bg-color: rgba(0, 0, 0, 0.2);

--cursor-color: #fff;

}

一部の色をspringに合わせる

code:style.css

body {

--dark-theme-bg: #24292f;

--dark-theme-border: solid 1px #888;

}

scrapboxのnav bar

code:style.css

body {

--navbar-bg: rgba(2, 167, 137, .5);

}

New Button

code:style.css

body {

--new-button-horizontal-color: #b44a29;

--new-button-vertical-color: var(--new-button-horizontal-color);

--new-button-bg: #f4835f;

--new-button-hover-bg: #f2693e;

--new-button-active-bg: #ef4c17;

}

Page Menu

code:style.css

body {

--tool-color: #535863;

--tool-light-color: #353b48;

--tool-badge-bg: #2b2e38;

--tool-bg: #2b2e38;

--tool-text-color: #dddede;

--body-headings-color: var(--tool-color);

}

本文

行番号の色は/Porin-Room/Settings#5b5e020f1a4b8a00006a4bd0からとってきた

code:style.css

body {

--code-line-number-color: #D181FF;

--cursor-code-line-number-color: #FF00F0;

}

dropdown menu (Scrapbox) の色を変えるUserCSSの変数設定

code:style.css

body {

--dropdown-menu-bg: #373b44;

--dropdown-menu-border: 1px solid #8888882d;

--dropdown-menu-text-color: var(--page-text-color);

--dropdown-menu-divider-color: #e5e5e5;

--dropdown-menu-text-hover-color: var(--page-text-color);

--dropdown-menu-text-hover-bg: #373b44;

}

scrapboxのページカード

code:style.css

body {

--card-title-bg: var(--navbar-bg);

--card-title-bg-pinned: var(--navbar-bg);

}

editorに枠線をつける

code:style.css

.page {

box-shadow: none;

border: solid 1px #888;

}

テーブル記法に枠線をつける

2021-04-11 20:38:44 /villagepump/@yosider#60719ba5e5172d000062e750 の修正を当てた

code:style.css

.table-block .cell {

border-bottom: solid 1px #888;

}

HelpFeel記法の背景色をインラインコード記法と同じにする

標準色の肌色はdark themeに合わない

code:style.css

.line code.helpfeel {

background-color: var(--code-bg);

}

code blockの色調節

コードブロック記法のタイトル行を静かな色にするUserCSS

code:style.css

/* code blockの頭を静かな色にする */

.line span.code-block .code-block-start {

border: solid 1px #66667F;

background-color: #272822;

padding: 2px 5px;

color: #7c9ff7;

}

.line span.code-block .code-block-start a {

color: #7c9ff7;

}

コードブロック記法の配色

Scrapbox用Shades Of Purple Themeを使う

code:style.css

/**

* Shades of Purple Theme — for Highlightjs.

* @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>

* @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS

* @version 1.5.0

.code-block {

--code-bg: #2d2b57;

--code-color: #e3dfff;

font-weight: normal;

}

code.highlight .hljs-subst {

color: #e3dfff;

}

code.highlight .hljs-title {

color: #fad000;

font-weight: normal;

}

code.highlight .hljs-name {

color: #a1feff;

}

code.highlight .hljs-tag {

color: #ffffff;

}

code.highlight .hljs-attr {

color: #f8d000;

font-style: italic;

}

code.highlight :is(

.hljs-built_in,

.hljs-selector-tag,

.hljs-section

) {

color: #fb9e00;

}

code.highlight .hljs-keyword {

color: #fb9e00;

}

code.highlight :is(

.hljs-string,

.hljs-attribute,

.hljs-symbol,

.hljs-bullet,

.hljs-addition,

.hljs-code,

.hljs-regexp,

.hljs-selector-class,

.hljs-selector-attr,

.hljs-selector-pseudo,

.hljs-template-tag,

.hljs-quote,

.hljs-deletion

) {

color: #4cd213;

}

code.highlight :is(

.hljs-meta,

.hljs-meta .hljs-string

) {

color: #fb9e00;

}

code.highlight .hljs-comment {

color: #ac65ff;

}

code.highlight :is(

.hljs-keyword,

.hljs-selector-tag,

.hljs-literal,

.hljs-name

) {

font-weight: normal;

}

code.highlight :is(

.hljs-literal,

.hljs-number

) {

color: #fa658d;

}

code.highlight .hljs-emphasis {

font-style: italic;

}

code.highlight .hljs-strong {

font-weight: bold;

}

変更点

code:style.css

code.highlight :is(

.hljs-selector-pseudo,

.hljs-deletion

) {

color: #e06c75

}

code:diff

+ aaa

- eeee

選択範囲の色を青白にする

from /MISONLN41/Settings#5f2bcfbcec4fce000063aeb3

デフォルトの緑色は、黒背景に合わなかった

白にした

from /appbirdNotebook-public/Atomっぽい色合いにしたい！#5ecb3f6fd3fe610000f29f28

code:style.css

::selection {

color: unset;

background: rgba(0,115,230,0.5);

}

.selection{

background-color: #ffffff77;

}

中黒の色を変える

code:style.css

.line .indent-mark .dot {

background-color: gray;

}

.line.number-list .dot::before {

color: gray;

}

code:style.css

}

References

/shokai/Dark Editor CSS

#2022-04-07 02:30:59

#2022-03-30 13:49:14 ✅コードブロックの文字の後ろだけ色が変わっているバグを直した

#2022-03-10 10:08:50 コードブロックの配色を変えた

#2022-02-21 16:34:14 dividerの色変えた

#2021-09-24 10:36:38